<script>
import sqlService from "@/api/sqlService";
import widgetService from "@/api/widgetService";
import { SQLCONFIG_TYPE_LIST } from '@/constant';
import moment from "moment";
import { cloneDeep, merge } from "lodash";

export default {
  name: "Table",
  props: {
    customWidgetId: String,
    keyFilter: {
      type: String,
      default: 'filterText'
    },
    btnWidgets: Object
  },
  render() {
    return <a-table
      {
        ... {
          props: {
            bordered: true,
            customRow: this.customRow,
            columns: this.columns,
            dataSource: this.dataSource,
            pagination: this.pagination,
            rowSelection: this.rowSelection,
            rowKey: (record, index) => index
          },
          scopedSlots: this.$scopedSlots
        }
      }
    />
  },
  data() {
    return {
      filter: {
        filterText: "",
        pageIndex: 1,
        pageSize: 20,
      },
      rowId: "",
      rowData: {},
      dataSource: [],
      columns: [],
      pagination: {
        pageSize: 20, // 默认每页显示数量
        total: 0,
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ["20", "50", "100", "200", "500"], // 每页数量选项
        showTotal: (total) => `共${total}条`, // 显示总数
        onShowSizeChange: (current, pageSize) => {
          this.filter.pageIndex = current;
          this.filter.pageSize = pageSize;
          this.setTableData();
        },
        onChange: (current, pageSize) => {
          this.filter.pageIndex = current;
          this.filter.pageSize = pageSize;
          this.setTableData();
        },
      },
      selectedRows: [],
      rowSelection: {
        selectedRowKeys: [],
        onChange: (selectedRowKeys, selectedRows) => {
          this.rowSelection.selectedRowKeys = selectedRowKeys;
          this.selectedRows = selectedRows;
          this.$emit('onChangeSelectedRows', this.selectedRows);
        }
      },
      sqlConfig: null,
      pageQueryParams: {},
    }
  },
  methods: {
    async setTableData (params = {}) {
      const { sqlConfigDTO } = this.sqlConfig
      const param = {
        sqlConfigName: sqlConfigDTO.name,
        pageIndex: this.filter.pageIndex,
        pageSize: this.filter.pageSize,
        params: {
          userId: this.userInfo.id,
          [this.keyFilter]: this.filter.filterText,
        }
      }
      merge(param.params, this.pageQueryParams, params);
      this.pageQueryParams = cloneDeep(param.params);
      const res = await sqlService.pageQuery(param)
      this.dataSource = res.rows
      this.pagination.total = res.total
      // this.rowSelection.selectedRowKeys.splice(0, this.rowSelection.selectedRowKeys.length);
    },
    refresh (params) {
      this.setTableData(params)
    },
    customRow(record, index) {
      return {
        on: {
          click: () => {
            this.rowId = index;
            this.rowData = record;
          },
          dblclick: () => {
            this.$emit('row-dbclick', record);
          },
        },
      };
    },
    setColumns ({ tableHeader }) {
      const columns = []
      JSON.parse(tableHeader).forEach(({ resultName, tableHeaderName, time, sqlConfigName, align, width }) => {
        const col = {
          dataIndex: resultName,
          title: tableHeaderName,
          align: align || undefined,
          width: width || undefined,
          scopedSlots: {
            customRender: sqlConfigName
          }
        }
        if (time) {
          col.customRender = function (text, row, index) {
            return moment(row[sqlConfigName]).format('YYYY-MM-DD HH:mm:ss')
          }
        }
        columns.push(col)
      })
      this.columns = columns;
    },
    getActiveRow() {
      return this.selectedRows.length === 1 ? this.selectedRows[0] : null;
    },
  },
  async mounted() {
    const sqlConfig = await widgetService.getCustomWidgetSqlConfigDTO(this.customWidgetId, SQLCONFIG_TYPE_LIST)
    this.sqlConfig = sqlConfig;
    this.setColumns(sqlConfig);
    this.setTableData();
  }
}
</script>

<style scoped lang="less">
.ant-table-wrapper {
  background: #FFF;
}
</style>